<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color:cadetblue;height: 120px;">

                <h1 style="padding-left: 60px;padding-top: 20px;color:white;">
                    Hello ! 你好 , Admin</h1>
                <h4 style="padding-top: 20px;padding-left: 100px;;color:white;">欢迎使用网格化治理平台！</h4>
            </el-header>

            <el-main>
                <div>
                    <div style="padding-top: 20px;padding-left: 20px;padding-top: 50px;">
                        首次登录系统 , 请根据引导完成以下操作步骤 !
                    </div>
                    <div style="padding-top: 50px;padding-left: 300px;">

                        <el-form ref="ruleFormRef" style="max-width: 1000px" :rules="rules" :model="from"
                            label-width="auto" class="demo-ruleForm" status-icon>

                            <el-form-item label="网格名称" prop="meshTypeName">

                                <el-select v-model="from.meshTypeName" @change="MeshTypeListArr" placeholder="请选择网格名称"
                                    style="width: 300px;">
                                    <el-option v-for="item in AreaLists" :key="item.meshTypeName"
                                        :label="item.meshTypeName" :value="item.meshTypeName" />
                                </el-select>

                            </el-form-item>
                            <el-form-item label="下属专业网格包括" prop="majorTypeTrr" style="padding-left:60px;">
                                <el-checkbox-group v-model="from.majorTypeTrr">
                                    <el-checkbox value="环保" label="环保">环保</el-checkbox>
                                    <el-checkbox value="城管" label="城管">城管</el-checkbox>
                                    <el-checkbox value="公安" label="公安">公安</el-checkbox>
                                    <el-checkbox value="综治" label="综治">综治</el-checkbox>
                                    <el-checkbox value="党建" label="党建">党建</el-checkbox>
                                    <el-checkbox value="园林" label="园林">园林</el-checkbox>
                                    <el-checkbox value="环卫" label="环卫">环卫</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item style="padding-left: 200px;padding-top: 120px;">
                                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                                <el-button type="primary" @click="submitForm(ruleFormRef)">
                                    确定
                                </el-button>

                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios';
import { ElMessage } from 'element-plus'
const ruleFormRef = ref<FormInstance>()

const from = reactive({
    meshTypeId: 0,
    meshTypeName: "",
    meshType: "物理网格",
    majorType: "",
    majorTypeTrr: [],
})

//验证
const rules = reactive<FormRules>({
    meshTypeName: [
        { required: true, message: '请选择网格！', trigger: 'blur' }
    ],
    majorTypeTrr: [
        { required: true, message: '请选择网格类型！', trigger: 'blur' }
    ],
})

//反填
const MeshTypeListArr = () => {
    axios.get("http://47.95.178.186:8000/GetLiGriddingRout/api/MeshType/BackNameMesh?MeshTypeName=" + from.meshTypeName).then(res => {
        let d = res.data;
        from.meshTypeId = d.meshTypeId;
        from.meshTypeName = d.meshTypeName;
        from.majorType = d.majorType;
        from.majorTypeTrr = d.majorType.split(",");
        console.log(res.data);
    })
}


const AreaLists = ref<{ meshTypeId: number; meshTypeName: string }[]>([]);

const Area = () => {
    axios.get("http://47.95.178.186:8000/GetLiGriddingRout/api/MeshType/BindMeshType").then(res => {
        AreaLists.value = res.data;
    })
}

//提交按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            from.majorType = from.majorTypeTrr.join(',');
            axios.put("http://47.95.178.186:8000/SetLiGriddingRout/api/MeshType/UpdateMestType", from).then(res => {

                if (res.data > 0) {
                    ElMessage.success("更新成功！");
                    MeshTypeListArr();
                    return;
                }
                else {
                    ElMessage.error("更新失败！");
                    return;
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

//重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    Area();
})

</script>

<style scoped></style>